<template>
  <div class="dialog-wrapper">
    <el-dialog :title="title" :visible.sync="outerVisible">
      <!-- 内层dialog -->
      <el-dialog width="30%" title="提示" :visible.sync="innerVisible" append-to-body>
        <h1>确认提交吗？</h1>
        <div slot="footer" class="dialog-footer">
          <el-button @click="innerClose">取 消</el-button>
          <el-button type="primary" @click="innerSure">确定</el-button>
        </div>
      </el-dialog>
      <!-- 外层dialog form表单 -->
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" align="left" :label-width="formLabelWidth">
          <el-radio v-model="form.gender" label="1">男</el-radio>
          <el-radio v-model="form.gender" label="2">女</el-radio>
        </el-form-item>
        <el-form-item label="年龄" align="left" :label-width="formLabelWidth">
          <el-input-number
            v-model="form.age"
            controls-position="right"
            @change="handleChange"
            :min="0"
            :max="100"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="生日" align="left" :label-width="formLabelWidth">
          <el-date-picker v-model="form.birth" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.address"></el-input>
        </el-form-item>
      </el-form>
      <!-- 外层dialog 确定取消区域 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="outerClose">取 消</el-button>
        <el-button type="primary" @click="outerSure">打开内层 Dialog</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "编辑数据"
    },
    outerVisible: {
      type: Boolean,
      default: false
    },
    innerVisible: {
      type: Boolean,
      default: false
    },
    formLabelWidth: {
      type: String,
      default: "120px"
    },
    form: {
      type: Object
    }
  },
  methods: {
    innerSure() {
      this.$emit("innerSure");
    },
    innerClose() {
      this.$emit("innerClose");
    },
    outerSure() {
      this.$emit("outerSure");
    },
    outerClose() {
      this.$emit("outerClose");
    },
    handleChange() {}
  }
};
</script>

<style>
</style>